<template>
    <!-- 防伪系统 -->
    <div class=" margin_top">
        <headers :pageindex="-1"></headers>
        <div class="boxs" :class="!ismobile ? 'ispc ' : 'ismobiles'">
            <div class="title">SECURITY CHECK</div>
            <div class="title">防伪查询</div>
            <div class="inputbox">
                <input class="inputs" type="text" v-model="Code" placeholder="输入防伪编码，点击下方按钮查询，系统检测为五秒" />
                <div class="shouzhi bluebtn" @click="search">查询</div>
            </div>


            <div class="w1">
                <p>温馨提示！</p>
                <p>1<span class="f24">、刮开标签图层，获得一组防伪编码，检测为五秒！</span></p>
                <p>2<span class="f24">、根据设计的防伪码顺序，依次输入到查询框内！</span></p>
                <p>3<span class="f24">、点击【查询】按钮，验证防伪码其真伪！</span></p>
                <p>4<span class="f24">、查询后请注意是否为首次查询！首次查询为</span>“1”<span
                        class="f24">。如若是多次查询，则会显示其它数字，单个防伪码上限查询次数是</span>“3”<span class="f24">，如果出现多次查询，请谨防假冒伪劣产品！</span>
                </p>

                <p>防伪码查询提示：<span class="f25">1</span>、正常查询直接进入！<span class="f25"> 2</span>、追溯码错误！<span
                        class="f25">&nbsp;&nbsp;3</span>、追溯码失效！</p>
            </div>
            <div class="w2">
                <p>增值服务：</p>
                <p>购买防伪数据可通过【关于我们】联系我们进行下单，个人<span
                        class="f27">/</span>公司无要求下单可直接购买数据包，如有要求需要后台管理的，可以联系我们增加此项服务。同时也可以选择自己需要的功能进行添加！</p>

                <p>【后台管理】企业可以在后台管理数据生成，数据管控，客户生成。</p>
                <p>【<span class="f27">PDA</span>】可安装到<span class="f27">PDA</span>设备中，方便出库入库人员掌控。</p>
            </div>
            <div class="tishie shouzhi" @click="dianji">点击下载PDA安装包，并安装至PDA中，若没有PDA的用户可以用安卓手机代替!</div>
            <div style="height: 50px;"></div>
        </div>
        <bottoms></bottoms>
    </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"
import titleline from "./modle/titleline.vue"

export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
        titleline
    },
    data() {
        return {
            ismobile: false,
            Code: ""
        }
    },
    methods: {
        dianji() {
            window.open('https://oss.yaoxinggongzuoshi.com/app/yaoxin.apk')
        },
        search() {
            this.$router.push({ path: "fangwei_step2", query: { Code: this.Code } });
        },
        apply() {
            this.$router.push({ path: '/experience' })
        }
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.tishie {
    color: #dc322f;
    padding: 0 20px;
    box-sizing: border-box;
}

.w1 {
    margin-top: 3rem;

    p {
        font-size: 1.3rem;
        color: #dc322f;
    }
}

.w2 {
    p {
        font-size: 1.3rem;
        color: #2aa198;
    }
}

.inputs {
    border: 2px solid #33bed2;
    width: 90%;
    margin: 0 auto;
    display: block;
    line-height: 2rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    padding: 0.4rem;
}

.boxs {
    width: 100%;
    margin: 0 auto;
    margin-top: 3rem;
}

.title {
    font-size: 1.5rem;
    text-align: center;
    color: #009aff;
    font-weight: bold;
}

.inputbox {
    margin-top: 2rem;
}

.ispc {
    width: 5rem;
    margin-top: 13rem;

    .inputbox {
        width: 100%;
        overflow: hidden;

        .inputs {
            font-size: 1.3rem;
            line-height: 3.5rem;
            padding: 0 2rem;
            width: 80%;
            float: left;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            box-sizing: border-box;
        }

        div {
            width: 20%;
            float: left;
            background-color: #268bd2;
            color: #fff;
            text-align: center;
            line-height: 3.5rem;
            border-radius: 0.5rem;
            border: 2px solid #268bd2;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }
    }


}

.ismobiles {
    .bluebtn {
        width: 90%;
        margin: 0 auto;
        line-height: 2.2rem;
        text-align: center;
        color: white;
        margin-top: 1rem;
        border-radius: 0.5rem;
    }

    .w1 {
        p {
            padding: 0 1.1rem;
            font-size: 1rem;
        }
    }

    .w2 {
        p {
            padding: 0 1.1rem;
            font-size: 1rem;
        }
    }

    .tishie {
        font-size: 13px;
        margin-left: 0px;
    }
}

.bluebtn:hover {
    background-color: #498ab5 !important;
    background-clip: padding-box;
    border-color: #000;
}
</style>
